<template>
     <div class="goodsinfo-container">
     <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
        
           <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in lunbo" :key="item.src">
              <img :src="item.src" class="img1">
            </mt-swipe-item>
        </mt-swipe>
        <div class="mui-card">
            <div class="mui-card-header">商品名称 </div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                <p class="price">
                    市场价：<del>￥{{goodsinfo.market_price}}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{goodsinfo.sell_price}}</span>
                </p>
                <p>购买数量：<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
                            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                            <input id="test" class="mui-input-numbox" type="number" :value="selectedCount" />
                            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                        </div>
                     </p> 
                        

                <p>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
                </p>
                </div>
                </div>
        </div>

        <!--商品的-->
        <div class="mui-card">
                    <div class="mui-card-header">商品参数</div>
                            <div class="mui-card-content">
                               <div class="mui-card-content-inner">
                                <p>商品货号：{{goodsinfo.goods_no}}</p>
                                <p>库存情况：{{goodsinfo.stock_quantity}}件</p>
                                <p>上架时间：{{ goodsinfo.add_time | dateFormat }}</p>
                              </div>
                         </div>  
                          <div class="mui-card-footer">
                            <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                            <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
                        </div>
        </div>
     </div>
     
</template>


<script>
import mui from "../../lib/mui/js/mui.js";
 //import comment from '../subcomponents/numbox.vue'
 
export default{
    data(){
        return{
             id:this.$route.params.id,
             lunbo:[],
             goodsinfo:[],
             ballFlag: false, 
             selectedCount:1
        }
    },
     mounted() {
    // 初始化数字选择框组件
    mui(".mui-numbox").numbox();
    console.log(this.max);
  },
    created() {
        this.getlunbo();
        this. getGoodsInfo()
    },
    methods:{
         async getlunbo(){
             const {data:res} = await this.$http.get("/api/getthumimages/" +this.id)
            // console.log(res)
             this.lunbo=res.message
         },
      async getGoodsInfo(){
              const {data:res} =await this.$http.get("api/goods/getinfo/" + this.id )
              console.log(res)
              this.goodsinfo=res.message[0]
         },

          goDesc(id){
              this.$router.push({ name: "goodsdesc", params: { id } });
         },
           goComment(id) {
      // 点击跳转到 评论页面
          this.$router.push({ name: "goodscomment", params: { id } });
    },
         addToShopCar() {
             
         var goodsinfo = {
            id: this.id,
            count: this.selectedCount,
           // count:document.getElementById('test').value,
            price: this.goodsinfo.sell_price,
            selected: true
            };
// 调用 store 中的 mutations 来将商品加入购物车
this.$store.commit("addToCar", goodsinfo);
        // 添加到购物车
        this.ballFlag = !this.ballFlag;
        },
            beforeEnter(el) {
  el.style.transform = "translate(0, 0)";
},
enter(el, done) {
  el.offsetWidth;

  // 获取小球的 在页面中的位置
const ballPosition = this.$refs.ball.getBoundingClientRect();
// 获取 徽标 在页面中的位置
const badgePosition = document
  .getElementById("badge")
  .getBoundingClientRect();

const xDist = badgePosition.left - ballPosition.left;
const yDist = badgePosition.top - ballPosition.top;

el.style.transform = `translate(${xDist+50}px, ${yDist}px)`;
el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";

  done();
},
afterEnter(el) {
  this.ballFlag = !this.ballFlag;
}
          
    
    },
    //  components: {
    //     // 用来注册子组件的节点
    //     comment
    // }
}

</script>

<style scoped>
.goodsinfo-container {
        background-color: #eee;
        overflow: hidden;
}
 .mint-swipe{
         height:200px;
        text-align:center
      }
      .img1{
        
           height:100%;
         }
      .mui-grid-view .mui-grid-9{
          background-color:#fff;
          
      }
     .mui-content .mui-grid-view .mui-grid-9 li{
          padding:0, 20px;
      }
       img{
          width:60%;
          height:60%;
      }
   .ball{
       width:15px;
       height:15px;
       background-color:red;
       z-index:99;
       border-radius:50%;
       position:absolute;
        top: 380px;
        left: 77px;
        
   }
</style>